<template>
  <div v-loading="loading" element-loading-text="加载中...">
    <van-nav-bar title="资产盘点" fixed placeholder />
<!--    <van-search v-model="search" placeholder="请输入盘点物品名称搜索" :clearable="false" show-action @input="filter" />-->
    <van-search v-model="value" show-action placeholder="请输入盘点物品名称搜索" @search="onSearch" @cancel="onCancel"/>
    <div style="padding-bottom:60px">
      <van-cell v-for="i in item_list" :key="i.pk" :label="i.department_display" :value="i.name" is-link center @click="openForm(i)" disabled="true" >
        <template #title>
          <span class="custom-title" >{{ i.category_display }}</span>
        </template>
      </van-cell>
    </div>
      <van-button type="danger" text="扫码" @click="saoma" />
    <van-goods-action>
      <van-goods-action-button type="danger" text="待提交盘点列表" @click="add" />
    </van-goods-action>
    <van-dialog v-model="showOpenFormVisable" title="盘点确认" :show-confirm-button="false" @closed="clearForm">
      <van-form style="padding:20px" @submit="submit">
        <van-field :value="form.field_01" label="物品名称" readonly></van-field>
<!--        <van-field type="number" v-model="form.int_01" label="盘点数量" required placeholder="请填写盘点数量" :rules="[{ required: true }]" @blur="reqNumber"></van-field>-->
        <van-field v-model="form.field_02" label="存房地点" placeholder="请填写存房地点"></van-field>
        <van-picker
          title="盘点状态"
          show-toolbar
          :columns="columns"
          @confirm="onConfirm"
          @cancel="onCancel"
          @change="onChange"
        />
        <van-field name="radio" label="盘点状态">
          <template #input>
            <van-radio-group v-model="form.field_03" direction="horizontal">
              <van-radio name="正常">正常</van-radio>
              <van-radio name="损坏">损坏</van-radio>
            </van-radio-group>
          </template>
        </van-field>
        <van-field v-model="form.field_04" label="盘点人" placeholder="请填写盘点人姓名"></van-field>
<!--        <van-field readonly clickable name="calendar" :value="form.datetime_01" label="归还日期" placeholder="请选择归还日期" :required="form.field_03 === '借用'" @click="showCalendar = true" :rules="[{ required: form.field_03 === '借用' }]" />-->
<!--        <van-field v-model="form.field_04" label="归还期限" placeholder="请填写归还期限"></van-field>-->
        <div style="margin: 16px;display:flex;justify-content:space-evenly">
          <van-button type="info" round style="width:110px" native-type="button" @click="showOpenFormVisable = false">取消</van-button>
          <van-button type="primary" round style="width:110px" native-type="submit">确定</van-button>
        </div>
      </van-form>
    </van-dialog>

    <van-calendar v-model="showCalendar" @confirm="CalendarConfirm" />
  </div>
</template>
<script>
import { store, commit } from "./store";
import resource from "@/resource.js";
import "@/components/page/WuPing/vant.plugin";
import moment from "moment";
import { Toast } from "vant";
import { parse } from 'qs';
import bus from "@/components/utils/bus"
import saoma from "@/components/common/saoma.vue";


export default {
  name: "MobileCode",
  data() {
    return {
      saomashow:false,
      value:'',
      search: "",
      currentGoods: null,
      item_list: [],
      allData: [],
      showOpenFormVisable: false,
      showCalendar: false,
      loading: false,
      form: {
        goodsPk: "",
        field_01: "",
        field_02: "",
        field_03: "正常",
        field_04:"",
      },
      finish: [],
      unfinish: [],
      active: 'unfinish',
      page: 1,
      pageSize: 10,
      total: 0,
      pk:'',
      store,
      columns: ['杭州', '宁波', '温州', '绍兴', '湖州', '嘉兴', '金华', '衢州'],
    };
  },
 components:{
    saoma,
 },
  methods: {

    onConfirm(value, index) {
      Toast(`当前值：${value}, 当前索引：${index}`);
    },
    onChange(picker, value, index) {
      Toast(`当前值：${value}, 当前索引：${index}`);
    },
    onSearch(val) {
      Toast(val);
    },
    onCancel() {
      Toast('取消');
    },
    commit,
    reqNumber(val) {
      if (!Number.isInteger(val.target.value)) {
        this.form.int_01 = parseInt(val.target.value)
      }
      if (Number(val.target.value) < 0) {
        this.form.int_01 = 0
      }
      if (Number(val.target.value) > Number(this.currentGoods.number)) {
        this.form.int_01 = this.currentGoods.number
      }

    },
    add() {
      this.$router.push("/endpandian");
    },
    async handleClick() {
      let id = this.$route.query.pk;
      this.pk=id
      console.log(id);

      if (this.active === 'finish') {
        this.finish = []
        let data = {
          task_id: this.pk,
          state: "已盘点",
          template_id: "FT9231247929344",
          page: this.page,
          pageSize: this.pageSize,
        }
        let res = await resource.getList('data', data);
        this.item_list = res;
        this.total = res.count;
        this.finish = res.data;
      } else {
        this.unfinish = []
        let data = {
          task_id: this.pk,
          state: "未盘点",
          template_id: "FT9231247929344",
          page: this.page,
          pageSize: this.pageSize,
        }
        let res = await resource.getList('data', data);
        this.item_list = res.data;
        this.total = res.count;
        this.unfinish = res.data;
      }

    },
    // async getItems() {
    //   this.loading = true;
    //   let res = await resource.getList("data", {
    //     template_id: "FT9231247929344",
    //     biz_id: this.$bizCode.wuping_biz,
    //     src_id: this.$sourceCode.source_id,
    //     root: store.category,
    //   });
    //   this.item_list = res;
    //   this.allData = res;
    //   this.loading = false;
    // },
    querySearch(queryString, cb) {
      var restaurants = this.item_list;
      var results = queryString
        ? restaurants.filter(this.createFilter(queryString))
        : restaurants;
      // 调用 callback 返回建议列表的数据
      cb(results);
    },
    createFilter(queryString) {
      return (restaurant) => {
        return restaurant.name.indexOf(queryString) > -1;
      };
    },
    CalendarConfirm(value) {
      this.form.datetime_01 = moment(value).format("yyyy-MM-DD");
      this.showCalendar = false;
    },
    filter(value) {
      this.item_list = [
        ...this.allData.filter((i) => {
          return i.name.indexOf(value) > -1;
        }),
      ];
    },
    openForm(row) {
      this.currentGoods = row;
      this.form.field_01 = row.category_display;
      this.form.goodsPk = row.pk;
      this.showOpenFormVisable = true;
    },
    submit() {
      commit("setList", this.form);
      this.showOpenFormVisable = false;
      setTimeout(() => {
        Toast.success("已添加到待确认列表！");
      }, 100);

    },
    clearForm() {
      this.form = {
        goodsPk: "",
        field_01: "",
        field_02: "",
        field_03: "",

      };
    },
  },
  created() {
    this.handleClick()


    //  bus.$on('jiehshou', (dats) =>{
  //     console.log(dats,'22')
  //   })
  // },
  // beforeDestroy() {
  //   bus.$off('jiehsou')
  // }
}
}
</script>

<style scoped>
.form {
  padding: 30px 50px;
}
</style>
